<template>
  <!--导航条-->
  <div class="homeBorder">
    <div class="nav">
      <div class="logo">
        <img @click="clickImg" src="./images/wheelchair.png">
      </div>
      <div class="navBar">
        <div class="zui">
          <ul>
            <li><router-link active-class="active" to="/home/nav">首页</router-link></li>
            <li>
              <keep-alive>
                <router-link active-class="active" to="/home/product">产品</router-link>
              </keep-alive>
            </li>
            <li><router-link active-class="active" to="/home/order">订单</router-link></li>
            <li><router-link active-class="active" to="/home/contact">联系我们</router-link></li>
          </ul>
        </div>
        <div class="dropdown">
          <div class="drop">个人中心</div>
          <div class="dropdown-content">
            <a href="javascript:void(0);">个人资料</a>
            <a href="javascript:void(0);">实名认证</a>
            <a href="javascript:void(0);" @click="signOut">退出登录</a>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../components/Home/Footer";
import {reqUserIdInfo} from "../../api";

export default {
  name: "frontPage",
  components:{
    Footer
  },
  methods:{
    clickImg(){
      this.$router.push({
        path:'/home'
      })
    },
    //退出登录
    async signOut(){
      await this.$store.dispatch('userLogout')
      localStorage.removeItem("USERTOKEN")
      this.$router.replace('/')
    },
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}

.homeBorder{
  width: 100vw;
  overflow-x: hidden;
}

.nav{
  width: 81vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: 12vh;
  background-color: #fff;
}
.logo{
  height: 12vh;
  width: 15vw;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.logo img{
  width: 5vw;
  height: 10vh;
}

.navBar{
  width: 65vw;
  display: flex;
}
.zui{
  width: 52vw;
  display: flex;
  align-items: center;
}
.zui ul{
  display: flex;
  justify-content: space-between;
}
li{
  display: inline-block;
  text-align: center;
  font-size: 1.2vw;
  list-style:none;
  width: 13vw;
}
/* 鼠标滑动变效果*/
li:hover{
  border-top:1px solid #ffc107;
}
li:hover a{
  color: #ffc107;
}
li a{
  width: 10vw;
  display: inline-block;
  color: #383838;
  text-decoration:none;
}
/*下拉菜单
*/
.drop {
  font-size: 1.2vw;
  width: 13vw;
  text-align: center;
  border: none;
}

.dropdown {
  width: 13vw;
  display: flex;
  align-items: center;
}

.dropdown-content {
  margin-top: 29vh;
  display: none;
  position: absolute;
  text-align: center;
  background-color: #fff;
  min-width: 13vw;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.dropdown-content a {
  font-size: 1vw;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: #ffc107}

.dropdown:hover .dropdown-content {
  display: inline-block;
  z-index: 1;
}

.dropdown:hover .drop {
  border-top: 1px solid  #ffc107;
  color: #ffc107;
}

.active{
  color:#42b983;
}
</style>
